<template>
  <div class="data-container">

    <!-- 头部 -->
    <div class="data-title-row">
      <span class="big-title">数据可视化面板</span>
    </div>
    <!-- 主体 -->
    <div class="L-data-main">
      <el-row :gutter="20">

        <!-- 左侧 -->
        <el-col :span="16">

          <!-- 数据概况 -->
          <el-row :gutter="20" align="middle">
            <el-col :span="12">
              <div class="second-title">
                数据概况
              </div>
            </el-col>

            <el-col :span="6">
              <el-select v-model="sjgkObj" placeholder="请选择部门" style="width: 100%">
                <el-option v-for="item in departmentArr" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-col>

            <el-col :span="6">
              <el-select v-model="sjgkMonth" placeholder="请选择月份" style="width: 100%">
                <el-option v-for="item in currentMonth" :key="item" :label="item + '月'" :value="item" />
              </el-select>
            </el-col>

          </el-row>

          <el-row :gutter="20" style="margin-top:20px">
            <el-col :span="6">
              <div class="overview-box overview1">
                <div class="second-lable">销售额</div>
                <div class="main-number">{{ sjgk.sales }}</div>
                <div class="second-lable">
                  比上月 {{ sjgk.salesChange >= 0 ? '增加' : '减少' }}
                  <i class="important-number" :class="sjgk.salesChange >= 0 ? 'up-color' : 'down-color'">{{
                    sjgk.salesChange }}%</i>
                </div>
                <div class="fk-img">
                  <img src="@/assets/images/img_fk1.png" style="width: 80px;">
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="overview-box overview2">
                <div class="second-lable">利润额</div>
                <div class="main-number">{{ sjgk.profit }}</div>
                <div class="second-lable">
                  比上月 {{ sjgk.profitChange >= 0 ? '增加' : '减少' }}
                  <i class="important-number" :class="sjgk.profitChange >= 0 ? 'up-color' : 'down-color'">{{
                    sjgk.profitChange }}%</i>
                </div>
                <div class="fk-img">
                  <img src="@/assets/images/img_fk2.png" style="width: 80px;">
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="overview-box overview3">
                <div class="second-lable">新入职员工</div>
                <div class="main-number">{{ sjgk.new }}</div>
                <div class="second-lable">

                  比上月 {{ sjgk.newChange >= 0 ? '增加' : '减少' }}
                  <i class="important-number" :class="sjgk.newChange >= 0 ? 'up-color' : 'down-color'">{{ sjgk.newChange
                    }}人</i>
                </div>
                <div class="fk-img">
                  <img src="@/assets/images/img_fk3.png" style="width: 80px;">
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="overview-box overview4">
                <div class="second-lable">返聘员工</div>
                <div class="main-number">{{ sjgk.fan }}</div>
                <div class="second-lable">
                  比上月{{ sjgk.fanChange >= 0 ? '增加' : '减少' }}
                  <i class="important-number" :class="sjgk.fanChange >= 0 ? 'up-color' : 'down-color'">{{ sjgk.fanChange
                    }}人</i>
                </div>
                <div class="fk-img">
                  <img src="@/assets/images/img_fk3.png" style="width: 80px;">
                </div>
              </div>
            </el-col>

          </el-row>

          <!-- 数据对比 && 数据趋势 -->
          <el-row :gutter="20" style="margin-top:20px">
            <el-col :span="12">
              <div class="second-title" style="margin-top:20px">
                数据对比（净利润）
              </div>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-select v-model="sjdbObj" placeholder="请选择部门" style="width: 100%">
                    <el-option v-for="item in departmentArr" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-col>
                <el-col :span="12">
                  <el-select v-model="sjdbMonth" placeholder="请选择月份" style="width: 100%">
                    <el-option v-for="item in currentMonth" :key="item" :label="item + '月'" :value="item" />
                  </el-select>
                </el-col>
              </el-row>

              <div id="data-contrast-chart" class="margin-top-20" style="width:100%;height:350px"></div>

            </el-col>

            <el-col :span="12">
              <div class="second-title" style="margin-top:20px">
                数据趋势
              </div>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-select v-model="sjqsObj" placeholder="请选择部门" style="width: 100%">
                    <el-option v-for="item in departmentArr" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-col>

              </el-row>
              <div id="data-trand-chart" class="margin-top-20" style="width:100%;height:350px"></div>

            </el-col>

          </el-row>

        </el-col>

        <!-- 右侧 -->
        <el-col :span="8">
          <div class="second-title" style="width: 100%;">
            销售排行
          </div>

          <el-row :gutter="20" justify="end">
            <el-col :span="12">
              <el-select v-model="xsphMonth" placeholder="请选择月份" style="width: 100%">
                <el-option v-for="item in currentMonth" :key="item" :label="item + '月'" :value="item" />
              </el-select>
            </el-col>
          </el-row>
          <div class="rank-container">
            <div class="rank-item" v-for="(item, index) in xsph" :key="index">
              <el-row :gutter="20" align="middle" style="margin-top:20px">
                <el-col :span="8" style="text-align: center;">
                  <img src="@/assets/images/img_circle.webp" style="width: 40px;">
                  <div class="rank-dep-title panel-bold-text">{{ item.name }}</div>
                </el-col>
                <el-col :span="8" class="rank-item-col">
                  <div class="rank-item-text">
                    销售额：
                    <i v-if="item.salesChange != 0" class="iconfont "
                      :class="item.salesChange > 0 ? 'icon-shangsheng-tianchong up-color' : 'icon-xiajiang_huaban down-color'"
                      style="font-size: 24px;margin-right:5px;"></i>
                    <span :class="item.salesChange >= 0 ? 'up-color' : 'down-color'">
                      {{ item.salesChange }}%
                    </span>
                  </div>

                  <div class="rank-item-text">入职员工：<span class="up-color">{{ item.new }}</span></div>
                </el-col>
                <el-col :span="8" class="rank-item-col">
                  <div class="rank-item-text">利润额：
                    <i v-if="item.salesChange != 0" class="iconfont "
                      :class="item.profitChange > 0 ? 'icon-shangsheng-tianchong up-color' : 'icon-xiajiang_huaban down-color'"
                      style="font-size: 24px;margin-right:5px;"></i>
                    <!-- <span class="down-color">{{ item.profitChange }}%</span> -->
                    <span :class="item.profitChange >= 0 ? 'up-color' : 'down-color'">
                      {{ item.profitChange }}%
                    </span>
                  </div>
                  <div class="rank-item-text">返聘员工：<span class="up-color">{{ item.fan }}</span></div>
                </el-col>

              </el-row>

            </div>

          </div>

        </el-col>

      </el-row>


      <!-- 底部 -->
      <el-row :gutter="20">

        <el-col :span="16">
          <!-- 职工转入转出 -->

          <el-row :gutter="20">
            <el-col :span="12">
              <div class="second-title2">
                职工转入转出
              </div>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-select v-model="ygzrzcObj" placeholder="请选择部门" style="width: 100%">
                    <el-option v-for="item in departmentArr" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-col>
                <el-col :span="12">
                  <el-select v-model="ygzrzcMonth" placeholder="请选择月份" style="width: 100%">
                    <el-option v-for="item in currentMonth" :key="item" :label="item + '月'" :value="item" />
                  </el-select>
                </el-col>
              </el-row>
              <el-row :gutter="20" style="margin-top:20px">
                <!-- <el-col :span="8">
                  <div class="worker-img-box">
                    <img src="@/assets/images/img_mf.png" style="width: 90%;">
                  </div>
                </el-col> -->
                <el-col :span="24">
                  <div class="worker-info-box">
                    <div class="worker-item">
                      <img src="@/assets/images/img_mf.png" style="width: 50px; margin-right:20px" />
                      <span class="worker-item-lable">转入 销售人员</span>
                      <span class="worker-item-number">{{ ygzrzc?.into.sales }}</span> <span class="worker-item-lable"
                        style="">人</span>
                      <span class="worker-item-lable">管理人员</span>
                      <span class="worker-item-number">{{ ygzrzc?.into.manager }}</span><span
                        class="worker-item-lable">人</span>
                    </div>

                    <div class="worker-item">
                      <img src="@/assets/images/img_mf.png" style="width: 50px; margin-right:20px" />
                      <span class="worker-item-lable">转出 销售人员</span>
                      <span class="worker-item-number">{{ ygzrzc?.outto.sales }}</span> <span class="worker-item-lable"
                        style="">人</span>
                      <span class="worker-item-lable">管理人员</span>
                      <span class="worker-item-number">{{ ygzrzc?.outto.manager }}</span><span
                        class="worker-item-lable">人</span>
                    </div>

                    <div class="worker-item">
                      <img src="@/assets/images/img_mf.png" style="width: 50px; margin-right:20px" />
                      <span class="worker-item-lable">
                        绝对值
                        销售 {{ ygzrzc?.into.sales > ygzrzc?.outto.sales ? '转入' : '转出' }}
                      </span>
                      <span class="worker-item-number">{{ Math.abs(ygzrzc?.into.sales - ygzrzc?.outto.sales) }} </span>
                      <span class="worker-item-lable" style="">人</span>
                      <span class="worker-item-lable">
                        管理 {{ ygzrzc?.into.manager > ygzrzc?.outto.manager ? '转入' : '转出' }}
                      </span>
                      <span class="worker-item-number">{{
                        Math.abs(ygzrzc?.into.manager - ygzrzc?.outto.manager) }}</span><span
                        class="worker-item-lable">人</span>
                    </div>

                  </div>

                </el-col>

              </el-row>

            </el-col>

            <el-col :span="12">
              <div class="second-title2">
                其他数据
              </div>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-select v-model="otherObj" placeholder="请选择部门" style="width: 100%">
                    <el-option v-for="item in departmentArr" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-col>
                <el-col :span="12">
                  <el-select v-model="otherMonth" placeholder="请选择月份" style="width: 100%">
                    <el-option v-for="item in currentMonth" :key="item" :label="item + '月'" :value="item" />
                  </el-select>
                </el-col>
              </el-row>
              <div class="other-box">
                <el-row :gutter="20" style="width: 100%;height: 100%;">
                  <el-col :span="12">
                    <div class="other-item">
                      <div>
                        <div style="font-size:14px;color:#cbcccf;font-weight: bolder;">访问人数</div>
                        <i>23</i>
                      </div>

                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="other-item">
                      <div>
                        <div style="font-size:14px;color:#cbcccf;font-weight: bolder;">公司内部人员调动</div>
                        <i>352</i>
                      </div>
                    </div>
                  </el-col>
                </el-row>

              </div>

            </el-col>

          </el-row>

        </el-col>

        <el-col :span="8">
          <div class="second-title2">
            新入职员工
          </div>
          <el-row :gutter="20" justify="end">
            <el-col :span="12">
              <el-select v-model="newMonth" placeholder="请选择月份" style="width: 100%">
                <el-option v-for="item in currentMonth" :key="item" :label="item + '月'" :value="item" />
              </el-select>
            </el-col>
          </el-row>
          <div style="width: 100%;height: 200px;">
            <el-row :gutter="20" style="width: 100%;height: 100%;">
              <el-col :span="24" style="width: 100%;height: 100%;">
                <div id="data-new-chart" style="width:100%;height:100%"></div>
              </el-col>

            </el-row>
          </div>
        </el-col>

      </el-row>

    </div>

  </div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted, computed, watch } from "vue";

const departmentArr = ref([
  { value: "all", label: "总公司" },
  { value: "销售一部", label: "销售一部" },
  { value: "销售二部", label: "销售二部" },
  { value: "销售三部", label: "销售三部" },
  { value: "销售四部", label: "销售四部" },
]);


interface monthDataVO {
  year: number;
  month: number;
  sales: number;
  profit: number;
  new: number;
  fan: number;
  into1: number;
  into2: number;
  outto1: number;
  outto2: number;
}


onMounted(() => {
  initContrast();
  initTrand();
  initPie();
});



const data = ref([
  {
    name: "销售一部",
    data: [
      { year: 2024, month: 12, sales: 100, profit: 85, new: 2, fan: 3, into1: 0, into2: 0, outto1: 0, outto2: 0 },
      { year: 2025, month: 1, sales: 100, profit: 89, new: 1, fan: 0, into1: 0, into2: 0, outto1: 0, outto2: 0 },
      { year: 2025, month: 2, sales: 101, profit: 88, new: 2, fan: 1, into1: 0, into2: 0, outto1: 0, outto2: 0, },
      { year: 2025, month: 3, sales: 103, profit: 87, new: 3, fan: 1, into1: 0, into2: 0, outto1: 0, outto2: 0, },
      { year: 2025, month: 4, sales: 101, profit: 92, new: 1, fan: 1, into1: 0, into2: 0, outto1: 0, outto2: 0, },
    ],
  },
  {
    name: "销售二部",
    data: [
      { year: 2024, month: 12, sales: 129, profit: 116, new: 1, fan: 0, into1: 0, into2: 0, outto1: 0, outto2: 0 },
      { year: 2025, month: 1, sales: 127, profit: 114, new: 0, fan: 0, into1: 0, into2: 0, outto1: 1, outto2: 1 },
      { year: 2025, month: 2, sales: 126, profit: 111, new: 0, fan: 0, into1: 1, into2: 0, outto1: 0, outto2: 0 },
      { year: 2025, month: 3, sales: 129, profit: 114, new: 1, fan: 0, into1: 0, into2: 0, outto1: 0, outto2: 0 },
      { year: 2025, month: 4, sales: 126, profit: 119, new: 1, fan: 0, into1: 0, into2: 0, outto1: 0, outto2: 0 },

    ],
  },
  {
    name: "销售三部",
    data: [
      { year: 2024, month: 12, sales: 166, profit: 139, new: 2, fan: 6, into1: 0, into2: 0, outto1: 0, outto2: 0 },
      { year: 2025, month: 1, sales: 162, profit: 132, new: 0, fan: 0, into1: 2, into2: 1, outto1: 0, outto2: 0 },
      { year: 2025, month: 2, sales: 167, profit: 131, new: 0, fan: 0, into1: 16, into2: 14, outto1: 3, outto2: 3 },
      { year: 2025, month: 3, sales: 168, profit: 142, new: 1, fan: 0, into1: 1, into2: 0, outto1: 0, outto2: 0 },
      { year: 2025, month: 4, sales: 179, profit: 145, new: 5, fan: 2, into1: 0, into2: 0, outto1: 0, outto2: 0 },
    ],
  },

  {
    name: "销售四部",
    data: [
      { year: 2024, month: 12, sales: 124, profit: 107, new: 1, fan: 0, into1: 0, into2: 0, outto1: 0, outto2: 0 },
      { year: 2025, month: 1, sales: 117, profit: 100, new: 0, fan: 0, into1: 0, into2: 0, outto1: 0, outto2: 0 },
      { year: 2025, month: 2, sales: 106, profit: 92, new: 1, fan: 0, into1: 2, into2: 2, outto1: 16, outto2: 14 },
      { year: 2025, month: 3, sales: 110, profit: 91, new: 0, fan: 0, into1: 0, into2: 0, outto1: 0, outto2: 0 },
      { year: 2025, month: 4, sales: 113, profit: 91, new: 2, fan: 0, into1: 0, into2: 0, outto1: 0, outto2: 0 },
      { year: 2025, month: 5, sales: 107, profit: 87, new: 2, fan: 1, into1: 0, into2: 0, outto1: 5, outto2: 4 },
    ],
  },
]);




const currentYear = new Date().getFullYear();
const currentMonth = new Date().getMonth() + 1 - 1;
const preYearLastMonth = 12;
const preYear = currentYear - 1


// 数据概况=====================================
const sjgkObj = ref("all");
const sjgkMonth = ref(currentMonth);

const sjgk = computed(() => {
  const currentComputedMonth = sjgkMonth.value;
  const currentComputedYear = new Date().getFullYear();
  const preComputedMonth = currentComputedMonth === 1 ? 12 : currentComputedMonth - 1;
  const preComputedYear = preComputedMonth === 12 ? currentComputedYear - 1 : currentComputedYear;
  const current = { sales: 0, salesChange: 0, profit: 0, profitChange: 0, new: 0, newChange: 0, fan: 0, fanChange: 0, into1: 0, into2: 0, outto1: 0, outto2: 0, io1: 0, io2: 0, };
  const pre = { sales: 0, profit: 0, new: 0, fan: 0, io1: 0, io2: 0, };

  for (let i = 0; i < data.value.length; i++) {
    const depItem = data.value[i];
    for (let j = 0; j < depItem.data.length; j++) {
      const dataItem = depItem.data[j];
      if (sjgkObj.value === "all") {
        if (dataItem.month === currentComputedMonth && dataItem.year === currentComputedYear) {
          current.sales += dataItem.sales;
          current.io1 += dataItem.outto1 - dataItem.into1;
          current.io2 += dataItem.outto2 - dataItem.into2;
          current.profit += dataItem.profit;

          current.new += dataItem.new;
          current.fan += dataItem.fan;
        }
        if (dataItem.month === preComputedMonth && dataItem.year === preComputedYear) {
          pre.sales += dataItem.sales;
          pre.io1 += dataItem.outto1 - dataItem.into1;
          pre.io2 += dataItem.outto2 - dataItem.into2;
          pre.profit += dataItem.profit;
          pre.new += dataItem.new;
          pre.fan += dataItem.fan;
        }
      } else {

        if (depItem.name === sjgkObj.value) {

          if (dataItem.month === currentComputedMonth && dataItem.year === currentComputedYear) {
            current.sales = dataItem.sales;
            current.io1 = dataItem.outto1 - dataItem.into1;
            current.io2 = dataItem.outto2 - dataItem.into2;
            current.profit = dataItem.profit;
            current.new = dataItem.new;
            current.fan = dataItem.fan;
          }
          if (dataItem.month === preComputedMonth && dataItem.year === preComputedYear) {
            pre.sales = dataItem.sales ;
            pre.io1 = dataItem.outto1 - dataItem.into1;
            pre.io2 = dataItem.outto2 - dataItem.into2;
            pre.profit = dataItem.profit;
            pre.new = dataItem.new;
            pre.fan = dataItem.fan;
          }

        }

      }
    }

    current.salesChange = (current.sales + current.io1) - (pre.sales );
    current.profitChange = (current.profit + current.io2)- (pre.profit );
    current.newChange = current.new - pre.new;
    current.fanChange = current.fan - pre.fan;
  }

  return current;
});

// 数据对比=====================================

const sjdbObj = ref("all");
const sjdbMonth = ref(currentMonth);
watch(sjdbObj, () => {
  initContrast()
})
watch(sjdbMonth, () => {
  initContrast()
})
const sjdb = computed(() => {

const startData = { sales: 0, profit: 0, rate: 0, io1: 0, io2: 0, into1: 0, into2: 0, outto1: 0, outto2: 0 };
const currentMonthData = { sales: 0, profit: 0, rate: 0, io1: 0, io2: 0, into1: 0, into2: 0, outto1: 0, outto2: 0 };
const preMonthData = { sales: 0, profit: 0, rate: 0, io1: 0, io2: 0, into1: 0, into2: 0, outto1: 0, outto2: 0 };


const currentComputedMonth = sjdbMonth.value;
const currentComputedYear = new Date().getFullYear();
const preComputedMonth = currentComputedMonth === 1 ? 12 : currentComputedMonth - 1;
const preComputedYear = preComputedMonth === 12 ? currentComputedYear - 1 : currentComputedYear;


for (let i = 0; i < data.value.length; i++) {
  const depItem = data.value[i];
  for (let j = 0; j < depItem.data.length; j++) {
    const dataItem = depItem.data[j];
    if (sjdbObj.value === "all") {
      if (dataItem.month === currentComputedMonth && dataItem.year === currentComputedYear) {
        currentMonthData.sales += dataItem.sales - dataItem.into1;//销售(本金)
        currentMonthData.profit += dataItem.profit - dataItem.into2;//利润(本金)
        currentMonthData.outto1 += dataItem.outto1;//销售(撤股)
        currentMonthData.outto2 += dataItem.outto2;//利润(撤股)
        currentMonthData.into1 += dataItem.into1;//销售(入股)
        currentMonthData.into2 += dataItem.into2;//利润(入股)


      }
      if (dataItem.month === preComputedMonth && dataItem.year === preComputedYear) {
        preMonthData.sales += dataItem.sales - dataItem.into1;
        preMonthData.profit += dataItem.profit - dataItem.into2;
        preMonthData.outto1 += dataItem.outto1;//销售(撤股)
        preMonthData.outto2 += dataItem.outto2;//利润(撤股)
        preMonthData.into1 += dataItem.into1;//销售(入股)
        preMonthData.into2 += dataItem.into2;//利润(入股)
      }

      if (dataItem.month === preYearLastMonth && dataItem.year === preYear) {
        startData.sales += dataItem.sales - dataItem.into1;
        startData.profit += dataItem.profit - dataItem.into2;
        startData.outto1 += dataItem.outto1;//销售(撤股)
        startData.outto2 += dataItem.outto2;//利润(撤股)
        startData.into1 += dataItem.into1;//销售(入股)
        startData.into2 += dataItem.into2;//利润(入股)
      }
    } else {

      if (depItem.name === sjdbObj.value) {

        if (dataItem.month === currentComputedMonth && dataItem.year === currentComputedYear) {
          currentMonthData.sales = dataItem.sales - dataItem.into1;
          currentMonthData.profit = dataItem.profit - dataItem.into2;
          currentMonthData.outto1 += dataItem.outto1;//销售(撤股)
          currentMonthData.outto2 += dataItem.outto2;//利润(撤股)
          currentMonthData.into1 += dataItem.into1;//销售(入股)
          currentMonthData.into2 += dataItem.into2;//利润(入股)
        }
        if (dataItem.month === preComputedMonth && dataItem.year === preComputedYear) {
          preMonthData.sales = dataItem.sales - dataItem.into1;
          preMonthData.profit = dataItem.profit - dataItem.into2;
          preMonthData.outto1 += dataItem.outto1;//销售(撤股)
          preMonthData.outto2 += dataItem.outto2;//利润(撤股)
          preMonthData.into1 += dataItem.into1;//销售(入股)
          preMonthData.into2 += dataItem.into2;//利润(入股)

        }
        if (dataItem.month === preYearLastMonth && dataItem.year === preYear) {
          startData.sales = dataItem.sales - dataItem.into1;
          startData.profit = dataItem.profit - dataItem.into2;
          startData.outto1 += dataItem.outto1;//销售(撤股)
          startData.outto2 += dataItem.outto2;//利润(撤股)
          startData.into1 += dataItem.into1;//销售(入股)
          startData.into2 += dataItem.into2;//利润(入股)
        }

      }

    }
  }


}
startData.rate = Number((startData.profit / startData.sales).toFixed(1)) * 100
currentMonthData.rate = Number((currentMonthData.profit / currentMonthData.sales).toFixed(1)) * 100
preMonthData.rate = Number((preMonthData.profit / preMonthData.sales).toFixed(1)) * 100
// initContrast()
return { startData, preMonthData, currentMonthData }
})


function initContrast() {
  const option = {
    legend: {
      textStyle: {
        fontSize: 12,
        color: "#88a1b7",
      },
    },
    tooltip: {},

    dataset: {
      // source: [
      //   ["product", "销售额(本金)", "销售额(入股)", "销售额(撤股)", "净利润(本金)", "净利润(入股)", "净利润(撤股)", "利润比"],
      //   ["年初", sjdb.value.startData.sales, sjdb.value.startData.into1, sjdb.value.startData.outto1, sjdb.value.startData.profit, sjdb.value.startData.into2, sjdb.value.startData.outto2, sjdb.value.startData.rate],
      //   ["上月", sjdb.value.preMonthData.sales, sjdb.value.preMonthData.into1, sjdb.value.preMonthData.outto1, sjdb.value.preMonthData.profit, sjdb.value.preMonthData.into2, sjdb.value.preMonthData.outto2, sjdb.value.preMonthData.rate],
      //   ["本月", sjdb.value.currentMonthData.sales, sjdb.value.currentMonthData.into1, sjdb.value.currentMonthData.outto1, sjdb.value.currentMonthData.profit, sjdb.value.currentMonthData.into2, sjdb.value.currentMonthData.outto2, sjdb.value.currentMonthData.rate],

      //   // ["上月", sjdb.value.preMonthData.sales, sjdb.value.preMonthData.profit, sjdb.value.preMonthData.rate],
      //   // ["本月", sjdb.value.currentMonthData.sales, sjdb.value.currentMonthData.profit, sjdb.value.currentMonthData.rate],
      // ],
      source: [
        ["product", "销售额(本金)",  "销售额(撤股)", "净利润(本金)", "净利润(撤股)", "利润比"],
        ["年初", sjdb.value.startData.sales,  sjdb.value.startData.outto1, sjdb.value.startData.profit,  sjdb.value.startData.outto2, sjdb.value.startData.rate],
        ["上月", sjdb.value.preMonthData.sales,  sjdb.value.preMonthData.outto1, sjdb.value.preMonthData.profit, sjdb.value.preMonthData.outto2, sjdb.value.preMonthData.rate],
        ["本月", sjdb.value.currentMonthData.sales,  sjdb.value.currentMonthData.outto1, sjdb.value.currentMonthData.profit, sjdb.value.currentMonthData.outto2, sjdb.value.currentMonthData.rate],

        // ["上月", sjdb.value.preMonthData.sales, sjdb.value.preMonthData.profit, sjdb.value.preMonthData.rate],
        // ["本月", sjdb.value.currentMonthData.sales, sjdb.value.currentMonthData.profit, sjdb.value.currentMonthData.rate],
      ],
      
    },
    xAxis: {
      type: "category",
      axisLabel: {
        formatter: "{value} ",
        textStyle: {
          color: "#878c91", //文字颜色
        },
      },
    },
    yAxis: {
      // type: 'value',
      axisLabel: {
        formatter: "{value} ",
        textStyle: {
          color: "#878c91", //文字颜色
        },
      },
      // axisTick: {
      //   show: false,
      //   lineStyle: {
      //     color: '#2c3e50' // 设置特定y轴的刻度线颜色为蓝色
      //   }
      // },
      // type: 'value',
      // axisTick: {
      //   show: true,
      // },
      axisLine: {
        lineStyle: {
          color: "#000", //一点点的那个线条的颜色
        },
      },
      splitLine: {
        lineStyle: {
          color: "#242c32", //一点点的那个线条的颜色
        },
      },
      // min: 0, // 最小值
      // max: 100, // 最大值
    },

    series: [
      {
        type: "bar",
        barWidth: 20,
        stack: 'sales',
        itemStyle: {
          // 使用线性渐变
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(56, 87, 154, 1)", // 起始颜色
            },
            {
              offset: 1,
              color: "rgba(56, 87, 154, 1)", // 结束颜色
            },
          ]),
        },
      },
      // {
      //   type: "bar",
      //   barWidth: 20,
      //   stack: 'sales',
      //   itemStyle: {
      //     // 使用线性渐变
      //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //       {
      //         offset: 0,
      //         color: "rgba(70, 112, 180, 1)", // 起始颜色
      //       },
      //       {
      //         offset: 1,
      //         color: "rgba(70, 112, 180, 1)", // 起始颜色
      //       },
      //     ]),
      //   },
      // },
      {
        type: "bar",
        barWidth: 20,
        stack: 'sales',
        itemStyle: {
          // 使用线性渐变
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(100, 165, 222, 1)", // 起始颜色
            },
            {
              offset: 1,
              color: "rgba(100, 165, 222, 1)", // 起始颜色
            },
          ]),
        },
      },


      {
        type: "bar",
        barWidth: 20,
        stack: 'profit',
        itemStyle: {
          // 使用线性渐变
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(218, 96, 40, 1)", // 起始颜色
            },
            {
              offset: 1,
              color: "rgba(218, 96, 40, 1)", // 起始颜色
            },
          ]),
        },
      },

      // {
      //   type: "bar",
      //   barWidth: 20,
      //   stack: 'profit',
      //   itemStyle: {
      //     // 使用线性渐变
      //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //       {
      //         offset: 0,
      //         color: "rgba(230, 160, 61, 1)", // 起始颜色
      //       },
      //       {
      //         offset: 1,
      //         color: "rgba(230, 160, 61, 1)", // 结束颜色
      //       },
      //     ]),
      //   },
      // },

      {
        type: "bar",
        barWidth: 20,
        stack: 'profit',
        itemStyle: {
          // 使用线性渐变
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(237, 189, 140, 1)", // 起始颜色
            },
            {
              offset: 1,
              color: "rgba(237, 189, 140, 1)", // 结束颜色
            },
          ]),
        },
      },



      {
        type: "bar",
        barWidth: 20,
        itemStyle: {
          // 使用线性渐变
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#00d63f" },
            { offset: 1, color: "#1e473b" },
          ]),
        },
      },
    ],
  };

  echarts.init(document.getElementById("data-contrast-chart")).setOption(option);
}

// 数据趋势=====================================
const sjqsObj = ref("all");
const sjqsMonth = ref(currentMonth);
watch(sjqsObj, () => {
  initTrand()
})

const sjqs = computed(() => {
  const xAxis = ['12月']
  const salesArr: number[] = []
  const profitArr: number[] = []

  for (let i = 1; i <= currentMonth; i++) {
    xAxis.push(`${i}月`)

  }


  for (let i = 0; i < data.value.length; i++) {
    const depItem = data.value[i];
    for (let j = 0; j < depItem.data.length; j++) {
      const dataItem = depItem.data[j];
      if (sjqsObj.value === "all") {

        if (!salesArr[j]) {
          salesArr.push(0)
        }
        if (!profitArr[j]) {
          profitArr.push(0)
        }
        salesArr[j] += dataItem.sales + dataItem.outto1 - dataItem.into1
        profitArr[j] += dataItem.profit + dataItem.outto2 - dataItem.into2;


      } else {

        if (depItem.name === sjqsObj.value) {

          salesArr[j] = dataItem.sales + dataItem.outto1 - dataItem.into1
          profitArr[j] = dataItem.profit + dataItem.outto2 - dataItem.into2;

        }

      }
    }


  }



  return { xAxis, salesArr, profitArr }



})
function initTrand() {
  const option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      textStyle: {
        fontSize: 12,
        color: "#88a1b7",
      },
    },
    xAxis: {
      type: "category",
      data: sjqs.value.xAxis,
      // boundaryGap: ['50%', '0%']
      boundaryGap: false,
    },
    yAxis: {
      type: "value",
      splitLine: {
        lineStyle: {
          color: "#242c32", //一点点的那个线条的颜色
        },
      },
      // boundaryGap: ['0%', '0%']
      boundaryGap: false,
    },
    series: [
      {
        name: "销售额",

        data: sjqs.value.salesArr,
        type: "line",
        // smooth: true,
        // stack: "a",
        symbol: "circle",
        symbolSize: 5,
        lineStyle: {
          // 线条样式设置
          color: "#216aff", // 线条颜色
          width: 2, // 线条宽度
          type: "solid", // 线条类型，如'solid'（实线）或'dotted'（点线）等
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(29,92,246,0.8)",
            },
            {
              offset: 1,
              color: "rgba(29,92,246,0.1)",
            },
          ]),
        },
      },
      {
        name: "利润额",

        data: sjqs.value.profitArr,
        type: "line",
        // smooth: true,
        // stack: "a",
        symbol: "circle",
        symbolSize: 5,
        lineStyle: {
          // 线条样式设置
          color: "#24830b", // 线条颜色
          width: 2, // 线条宽度
          type: "solid", // 线条类型，如'solid'（实线）或'dotted'（点线）等
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(45,199,4,0.8)",
            },
            {
              offset: 1,
              color: "rgba(0,198,255,0.1)",
            },
          ]),
        },
      },
    ],
  };

  echarts.init(document.getElementById("data-trand-chart")).setOption(option);
}


// 销售排行=====================================
const xsphMonth = ref(currentMonth);


const xsph = computed(() => {
  const currentComputedMonth = xsphMonth.value;
  const currentComputedYear = new Date().getFullYear();
  const preComputedMonth = currentComputedMonth === 1 ? 12 : currentComputedMonth - 1;
  const preComputedYear = preComputedMonth === 12 ? currentComputedYear - 1 : currentComputedYear;



  interface rankItemVO {
    name: string | undefined;
    salesChange: number;
    profitChange: number;
    new: number | undefined;
    fan: number | undefined;
  }
  const rankArr: rankItemVO[] = []

  interface dataItemVO {
    name?: string;
    sales: number;
    profit: number;
    new?: number;
    fan?: number;
    io1: number;
    io2: number;
  }


  const currentDataArr: dataItemVO[] = []
  const preDataArr: dataItemVO[] = []



  for (let i = 0; i < data.value.length; i++) {
    const depItem = data.value[i];
    for (let j = 0; j < depItem.data.length; j++) {
      const dataItem = depItem.data[j];

      if (dataItem.month === currentComputedMonth && dataItem.year === currentComputedYear) {
        currentDataArr.push({ name: depItem.name, sales: dataItem.sales, profit: dataItem.profit, io1: dataItem.outto1 - dataItem.into1, io2: dataItem.outto2 - dataItem.into2, new: dataItem.new, fan: dataItem.fan })
      }

      if (dataItem.month === preComputedMonth && dataItem.year === preComputedYear) {
        preDataArr.push({ name: depItem.name, sales: dataItem.sales, profit: dataItem.profit, io1: dataItem.outto1 - dataItem.into1, io2: dataItem.outto2 - dataItem.into2, new: dataItem.new, fan: dataItem.fan })

      }
    }
  }



  for (let i = 0; i < currentDataArr.length; i++) {
    let rankItem: rankItemVO = {}
    const currentItem = currentDataArr[i]
    const preItem = preDataArr[i]
    rankItem.name = currentItem.name
    // rankItem.salesChange = (currentItem.sales + currentItem.io1) - (preItem.sales + preItem.io1)
    // rankItem.profitChange = (currentItem.profit + currentItem.io2) - (preItem.profit + preItem.io2)
    rankItem.salesChange = (currentItem.sales + currentItem.io1) - (preItem.sales)
    rankItem.profitChange = (currentItem.profit + currentItem.io2) - (preItem.profit)
    rankItem.new = currentItem.new
    rankItem.fan = currentItem.fan
    rankArr.push(rankItem)
  }


  // rankArr.push({ name: depItem.name, salesChange: current.salesChange, profitChange: current.profitChange, new: current.new, fan: current.fan })

  return rankArr.sort((a, b) => b.salesChange - a.salesChange);
});



//员工转入转出 =====================================
const ygzrzcObj = ref("all");
const ygzrzcMonth = ref(currentMonth);

const ygzrzc = computed(() => {
  const currentComputedMonth = ygzrzcMonth.value;
  const currentComputedYear = new Date().getFullYear();
  const preComputedMonth = currentComputedMonth === 1 ? 12 : currentComputedMonth - 1;
  const preComputedYear = preComputedMonth === 12 ? currentComputedYear - 1 : currentComputedYear;

  const into = { sales: 0, manager: 0 }
  const outto = { sales: 0, manager: 0 }


  for (let i = 0; i < data.value.length; i++) {
    const depItem = data.value[i];
    for (let j = 0; j < depItem.data.length; j++) {
      const dataItem = depItem.data[j];
      if (ygzrzcObj.value === "all") {
        if (dataItem.month === currentComputedMonth && dataItem.year === currentComputedYear) {

          into.sales += dataItem.into1
          into.manager += dataItem.into2

          outto.sales += dataItem.outto1
          outto.manager += dataItem.outto2


        }

      } else {

        if (depItem.name === ygzrzcObj.value) {

          if (dataItem.month === currentComputedMonth && dataItem.year === currentComputedYear) {
            into.sales = dataItem.into1
            into.manager = dataItem.into2

            outto.sales = dataItem.outto1
            outto.manager = dataItem.outto2
          }


        }

      }
    }

  }
  return { into, outto }





})






// 其他数据 =====================================
const otherObj = ref("all");
const otherMonth = ref(currentMonth);


// 新员工 =====================================

const newMonth = ref(currentMonth);
watch(newMonth, () => {
  initPie()
})

const newStaff = computed(() => {
  const currentComputedMonth = newMonth.value;
  const currentComputedYear = new Date().getFullYear();
  const newStaff = []

  for (let i = 0; i < data.value.length; i++) {
    const depItem = data.value[i]

    for (let j = 1; j < depItem.data.length; j++) {
      const dataItem = depItem.data[j];
      if (dataItem.month === currentComputedMonth && dataItem.year === currentComputedYear) {
        const obj = { name: depItem.name, value: dataItem.new }
        newStaff.push(obj)

      }
    }
  }
  console.log("&&&&", newStaff)
  return newStaff

})


function initPie() {
  const option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      right: "5%",
      top: "center",
      itemGrap: 140,
      itemWidth: 25,
      itemHeight: 15,
      textStyle: {
        fontSize: 12,
        color: "#88a1b7",
      },

      // left: 'center'
    },

    series: [
      {
        name: "新员工数据",
        right: "40%",
        type: "pie",
        radius: ["50%", "70%"],
        // avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 5,
        },
        label: {
          // show: true,
          position: "center",
        },


        // labelLine: {
        //   show: true, // 显示引导线
        //   length: 5,  // 引导线长度
        //   length2: 2  // 第二段长度，即标签与引导线的距离
        // },
        color: ["#29fcfb","#8aa5bc",  "#3caafc", "#374aff"],
        // roseType: 'area',
        data: newStaff.value,
      },
    ],
  };

  echarts.init(document.getElementById("data-new-chart")).setOption(option);
}

// 
</script>

<style>
.worker-item-lable {
  font-size: 14px;
  color: #88a1b7;
  font-weight: bold;
  margin: 0 5px;
}

.worker-item-number {
  font-size: 18px;
  color: #fff;
  font-weight: bold;
  margin: 0 5px;
}

.block-box {
  width: 20px;
  height: 20px;
  background-color: #29ffff;
  margin-right: 10px;
}

.flex-row1 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.other-box {
  width: 100%;
  height: 200px;
}

.other-item {
  width: 100%;
  height: 100%;
  background: url("@/assets/images/img_fp.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  font-weight: bold;
}

.worker-item {
  width: 100%;
  padding: 5px 20px;
  background: rgba(35, 43, 56, 0.6);
  font-weight: bold;
  font-size: 16px;
  color: #8d929c;

  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.worker-img-box {
  width: 100%;
  height: 200px;
  background: rgba(35, 43, 56, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.worker-info-box {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.panel-bold-text {
  font-weight: bold;
}

* {
  color: #fff;
}

.up-color {
  color: #29ffff;
  font-weight: bold;
}

.down-color {
  color: #ff5f28;
  font-weight: bold;
}

.rank-item-text {
  font-size: 14px;
  font-weight: bold;
  color: #88a1b7;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.rank-item-col {
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
}

.rank-item {
  margin: 25px auto;
  border-bottom: 1px solid #2d3e43;
  padding-bottom: 30px;
}

.rank-dep-title {
  font-size: 18px;
  color: #fff;
  /* margin-top:10px */
}

.rank-container {
  width: 100%;
  min-height: 500px;
  background: url("@/assets/images/img_rank_bg.png");
  background-repeat: no-repeat;
  background-position: left;
  background-size: cover;
  padding: 10px;
}

.fk-img {
  position: absolute;
  top: 10px;
  right: 10px;
}

.important-number {
  font-size: 18px;
  /* color: #29ffff; */
  font-weight: bold;
  margin-left: 10px;
}

.main-number {
  font-size: 36px;
  color: #fff;
  font-weight: bold;
}

.second-lable {
  font-size: 14px;
  color: #88a1b7;
  font-weight: bold;
}

.overview1 {
  background: url("@/assets/images/img_overview_bg.png");
}

.overview2 {
  background: url("@/assets/images/img_overview_bg2.png");
}

.overview3 {
  background: url("@/assets/images/img_overview_bg3.png");
}

.overview4 {
  background: url("@/assets/images/img_overview_bg4.png");
}

.overview-box {
  width: 100%;
  height: 120px;
  padding-left: 20px;
  position: relative;

  background-repeat: no-repeat;
  background-position: left;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.second-title {
  width: 100%;
  height: 50px;
  background: url("@/assets/images/img_second_title_bg.png");
  background-repeat: no-repeat;
  background-position: left;
  background-size: cover;

  color: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 30px;
  font-size: 20px;
}

.second-title2 {
  width: 100%;
  height: 70px;
  background: url("@/assets/images/img_second_title_bg2.png");
  background-repeat: no-repeat;
  background-position: left;
  background-size: cover;

  color: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 30px;
  font-size: 20px;
}

.data-container {
  width: 100vw;
  /* height: 100vh; */
  background-color: #000;
  background: url("@/assets/images/img_bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
  padding: 20px;
}

.data-title-row {
  width: 100%;
  height: 80px;
  background: url("@/assets/images/img_top_bar_bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  font-size: 35px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 25px;
}

.data-title-row2 {
  width: 100%;
  height: 80px;
  background: url("@/assets/images/img_top_bar_bg2.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  font-size: 35px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 25px;
}

.data-title-row .big-title {
  color: #fff;
  text-shadow: 0 0 5px #b4ffff;
  /* base shadow */
  filter: drop-shadow(0 0 5px #b4ffff);
  /* additional glow effect */
}

.L-data-main {
  padding: 30px;
}
</style>
